<script lang="ts" setup>
	import { computed } from 'vue';
	import type { IFieldItemData } from '@/types/data';
	import Stars from '../Sub/Stars.vue';

	interface IProps {
		data: Omit<IFieldItemData, "field">;
	}

	const props = defineProps<IProps>();

	const keywords = computed<string[]>(() => {
		if (props.data?.keywords?.length) {
			return props.data.keywords.split(',');
		}
		return [];
	});
</script>

<template>
	<div class="food-item">
		<router-link :to="{path: '/detail', query: {field: 'food', id: props.data.id}}">
			<div class="img">
				<img class="food-img" v-lazy="props.data.img" :alt="props.data.name" />
			</div>
			<div class="info">
				<h1 class="title">{{props.data.name}}</h1>
				<p class="stars">
          <stars :starNum="Number(props.data.star)"></stars>
					<span class="price">￥{{props.data.defaultPrice}}/人</span>
				</p>
        <p class="keyword">
        	<span
            class="badge"
        	  v-for="item of keywords"
            :key="item"
          >
        	  {{item}}
        	</span>
        </p>
        <p class="others">
        	<span class="item">美食</span>
        	<span class="item">{{props.data.cityName}}</span>
        </p>
			</div>
		</router-link>
	</div>
</template>

<style lang="scss" scoped>
	@import '../../../assets/styles/mixins.scss';
	@import '../../../assets/styles/variables.scss';

	.food-item {
		position: relative;
		border-bottom: 1px solid #ddd;
		background-color: #fff;

		.img {
			width: 1.2rem;
			height: 1.2rem;
			padding: .1rem;
			box-sizing: border-box;

			.food-img {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: .1rem .1rem 0 1.2rem;
			box-sizing: border-box;

			.title {
				@include ellipsis;
				font-size: .18rem;
				color: #000;
				line-height: .2rem;
			}

			.stars {
				font-size: .14rem;
				line-height: .3rem;

				.price {
					color: #333;
				}
			}

			.keyword {
				height: .3rem;
				line-height: .2rem;
				overflow: hidden;

				.badge {
					margin-left: .05rem;
					padding: 0 .05rem;
					color: rgb(190, 158, 77);
					background-color: rgb(251, 244, 228);
					font-size: .14rem;
				}
			}

			.others {
				display: flex;
				justify-content: space-between;
				font-size: .14rem;
				line-height: .25rem;
			}
		}
	}
</style>
